<template>
  <div class="personalCenterHistory_container pr-1 pl-1">
		<van-tabs v-model="active" color="#0086FF" background="#0C1527" title-active-color="#0086FF" title-inactive-color="#FFFFFF" :swipeable="true" :animated="true" line-height="0"  @change="tabChange">
			<van-tab v-for="(item, index) in currencyList" :key="index" :title="item.name" :name="item.id" >
				<div class="changeDate_box mb-1" @click="onClickSelectData">
					<div class="changeDate" >
						<span>{{ showBeginData != null && showEndData != null ? showBeginData+"-"+showEndData : $t('选择时间') }}</span>
						<img src="@/image/personalCenter/icon_arrow_you@1x.png" alt="">
					</div>
				</div>
				<van-list
					v-model="loading"
					:finished="finished"
					@load="onLoad"
					:immediate-check="false"
					:offset="300"
					>
					<div class="history_list br-16 pr-1 pl-1">
						<div class="history_list_item pb-0" v-for="(item,index) in itemList" :key="index" @click="clickItem(item.id)">
							<div class="history_list_item_title">
								<span>{{ item.name }}</span>
								<span class="history_list_item_title_sps">{{ item.sd_name ? item.sd_name : item.price + ' ' + item.currency }}</span>
							</div>
							<div class="history_list_item_time">
								<span>{{ item.time }}</span>
								<span :class="getSuccessfulShowInfo(item.status).class">{{ getSuccessfulShowInfo(item.status).text }}</span>
							</div>
						</div>
					</div>
				</van-list>
			</van-tab>
		</van-tabs>
		<van-calendar v-model="datePopShow" :title="$t('选择时间')" 
		type="range" :min-date="minDate" :max-date="maxDate" 
		color="#005cdf" :confirm-text="$t('确认')"  
		@confirm="onSelectDataConfirm" @close="onSelectDataClose"
		:show-mark="false" :allow-same-day="true"/>
	</div>
</template>

<script>
import { getHistoryTitle , getHistory } from "@/request/personalCenter"
export default {
	name: "PersonalCenterHistory",
	data() {
		return {
			id:'',
			active:'',
			total: '',
			limit: 20,
			loading: false,
			finished: true,
			rquestingList: false,
			currencyList:[],
			itemList:[],
			datePopShow: false,
      		maxDate: new Date(),
			selectedBeginData: null,
			selectedEndData: null,
		}
	},
	mounted(){
		this.id = this.$route.params.id

		this.getTabHistoryTitle()
	},
	computed: {
		minDate(){
			const currentDate = new Date();
			const currentMonth = currentDate.getMonth();
			const newMonth = currentMonth - 12;

			if (newMonth < 0) {
				// 计算需要减少的年份
				const yearToSubtract = Math.ceil(Math.abs(newMonth) / 12);
				// 调整年份
				currentDate.setFullYear(currentDate.getFullYear() - yearToSubtract);
				// 调整月份，使用取模运算得到正确的月份
				currentDate.setMonth(12 + (newMonth % 12));
			} else {
				currentDate.setMonth(newMonth);
			}
			return currentDate;
		},

		showBeginData() {
			return this.selectedBeginData ? this.formatDate(this.selectedBeginData) : null;
		},

		showEndData() {
			return this.selectedEndData ? this.formatDate(this.selectedEndData) : null;
		},
	},
	methods: {
		getTabHistoryTitle(){
			// 在此请求用户历史记录标题
			getHistoryTitle({}).then(res=>{
				if(res.code == 1){
					// this.currencyList = res.data
					this.currencyList = this.disposeTitle(res.data)
					if(this.currencyList.length > 0){
						this.active = this.currencyList[0].id
						this.resetPageInfo()
						this.getuserHistory(this.currencyList[0].id)
					}
					
				}
			})
		},
		formatDate(date,sign = '.',order = 'MDY') {
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const year = date.getFullYear();
			if (order === 'DMY') {
				return `${day}${sign}${month}${sign}${year}`;
			}else if (order === 'YMD') {
				return `${year}${sign}${month}${sign}${day}`;
			}else {
				return `${month}${sign}${day}${sign}${year}`;
			}
		},
		
		clickItem(id){
			let itemInfo = this.currencyList.find(item => item.id === this.active);
			if (itemInfo) {
				this.$router.push({name: 'PersonalCenterHistoryDetail', params: {id: id,title: itemInfo.name}});
			}
			
		},

		disposeTitle(obj){
			let titleList = []
			for(let i = 0; i < obj.length; i++){
				let itemData = obj[i]
				for(let key in itemData){
					let titleInfo = {
						id: key,
						name: itemData[key]
					}
					titleList.push(titleInfo)
					break
				}
			}
			return titleList
		},
		getuserHistory(id){
			let time = null
			if(this.selectedBeginData != null && this.selectedEndData != null){
				time = this.formatDate(this.selectedBeginData,'-','YMD')+','+this.formatDate(this.selectedEndData,'-','YMD')
			}
			// 在此请求用户历史记录数据
			getHistory({type:id,limit:this.limit,time:time}).then(res=>{
				if(res.code == 1){
					this.total = res.data.data.total
					this.finished = this.limit >= this.total

					this.disposeList(res.data.data.data)
				}
				this.rquestingList = false
				
				this.loading = false
			}).catch(err=>{
				this.rquestingList = false
				this.loading = false
				this.finished = true
			})
		},

		resetPageInfo(){
			this.limit = 20
			this.finished = true
			this.loading = false
			this.rquestingList = false
			this.itemList = []
		},

		resetSelectedData(){
			this.selectedBeginData = null
			this.selectedEndData = null
		},

		changeHistory(id,title){
			this.resetPageInfo()
			this.resetSelectedData()
			this.getuserHistory(id)
		},

		tabChange(id,title){
			this.changeHistory(id,title)
		},

		onClickSelectData() {
			this.resetSelectedData()
			this.datePopShow = true;
		},

		onSelectDataConfirm(date) {
			this.datePopShow = false;
			this.selectedBeginData = date[0]
			this.selectedEndData = date[1]
			this.resetPageInfo()
			this.getuserHistory(this.active)
		},

		onSelectDataClose() {
			if (!this.selectedBeginData && !this.selectedEndData) {
				this.resetPageInfo()
				this.getuserHistory(this.active)
			}
		},

		disposeList(item){
			for(let i = this.itemList.length; i < item.length; i++){
				let val = item[i]
				let itemInfo = {
					id: val.id,
					name: val.type,
					time: val.created,
					currency: val.currency.toUpperCase(),
					price: val.money,
					status: val.status != null ? val.status : 2, // 默认状态为成功,
					sd_name: val.sd_name ? val.sd_name : null
				}
				this.itemList.push(itemInfo)
			}
		},
		onLoad(){
			if(this.rquestingList) return
			this.rquestingList = true
			setTimeout(() => {
				if(this.limit <= this.total){
					this.limit += 15
					this.getuserHistory(this.active)
				}else{
					this.finished = true
				}
			}, 1000);
		},

		getSuccessfulShowInfo(status) {
			let info = {}

			if (status == 2) {
				info.text = this.$t("成功");
				info.class = 'text-success';
			} else if (status == 3) {
				info.text = this.$t("失败");
				info.class = 'text-danger';
			} else {
				info.text = this.$t("处理中");
				info.class = 'text-processing';
			}
			return info;
		}
	}
}
</script>

<style lang="less">
@import "@/assets/styles/personalCenter/index.less";
</style>